<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="范珍珍">
        <title>home</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="home.css">
        <link rel="stylesheet" href="base.css">
        <style>
            
        </style>
    </head>
    <body>

         <footer class="footer_ul">
            <ul class="ul_li">
                <li class="same-li color_first"><a href="index.html"><span class="glyphicon glyphicon-home"></span><span>首页</span></a></li>
                <li class="same-li"><a href="home.html"><span class="glyphicon glyphicon-th-list"></span><span>分类</span></a></li>
                <li class="same-li"><a href="cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span>购物车</span></a></li>
                <li class ="same-li"><a href="my.html"><span class="glyphicon glyphicon-user"></span><span>我的</span></a></li>
            </ul>
        </footer>
<!--主要内容区-->
        <main id="maincontent">
            <div class="nav_home">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <sapn>商品分类</sapn>
                <span class="glyphicon glyphicon-search"></span>
            </div>
<!--分类商品导航条-->
        <div id="nav_product" class="table-responsive">
        <table class="table">
            <tr>
                <td>手机.电话卡</td>
                <td>笔记本.平板</td>
                <td>电视.盒子</td>
                <td>智能硬件.路由器</td>
                <td>移动电源.电池</td>
                <td>耳机.音响</td>
                <td>小米生活方式</td>
                <td>保护类配件</td>
                <td>优惠套装</td>
            </tr>
        </table>
        </div>
        <section id="content_middle"></section>

<!--横幅区域-->
    <div id="banner">
        <img src="image/banner.jpg" alt="">
    </div>
    <section id="content_middle"></section>

<!--手机电话卡-->
<div class="phonecar">
    <p id="phcar_center">手机.电话卡</p>
    <div id='phone_picture'>
      <a href="">
              <figure>
                  <img src="image/图片2.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片2.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片3.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片4.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片5.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片6.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片6.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                  </figcaption>
              </figure>
          </a>
    </div>
</div>

</main>


        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>

<script>

 var nav = document.getElementById('nav_product');
 console.log(nav)
$(window).scroll(function(){
    var scrollHeight = $(window).scrollTop();
    if(scrollHeight >= 40){
        nav.style.position = 'fixed';
        nav.style.top = 0;
    }
    else{
        nav.style.position = 'static';
    }
})

var lis=document.getElementsByClassName('same-li')
for(var i=0;i<lis.length;i++){
    var item_li=lis[i];
    item_li.onclick=function(){
        for(var j=0;j<lis.length;j++){
            var li=lis[j];
            li.className='same-li'
        }
        this.className='same-li color_first'

    }
}

    </script>
</html>